div{
    width: 100%;
    height: 100px;
    margin: 0 auto 20px auto;
    border: 2px solid black;
    box-sizing: border-box;
}
.d1, .d2, .d3{
    animation-name: couleur;
    animation-duration: 3s;
    animation-timing-function: linear;
    animation-delay: 3s;
}
.d1{
    animation-fill-mode: backwards;
}
.d2{
    animation-fill-mode: forwards;
}
.d3{
    animation-fill-mode: both;
}
@keyframes couleur{
    from{background-color: orange;}
    50%{background-color: purple;}
    to{background-color: blue;}
}